<template>
	<view class="container">
		<view class="bg-color5 padding-sm text-sm text-white text-center">
			提示：根据国家政策要求，发布信息前需要实名认证
		</view>


		<view class="margin-top-sm padding bg-white">
			<view class="bg-white text-13 flex justify-between align-center" style="padding-bottom: 33rpx;">
				<view class="text-333 flex-sub text-bold">
					姓名
				</view>
				<input type="text" v-model="name" value="" class="text-13 flex-treble" placeholder="请输入姓名" />
			</view>
			<view class="bg-white text-13 flex justify-between align-center" style="padding-bottom: 33rpx;">
				<view class="text-333 flex-sub text-bold">
					身份证号
				</view>
				<input type="idcard" v-model="idCard" value="" class="text-13 flex-treble" placeholder="请输入身份证号" />
			</view>
			<view class="text-13 text-333 text-bold margin-top-sm">
				上传法人身份证
			</view>
			<view class="text-767696 bg-white margin-top-sm text-sm">
				请上传清晰身份证件，避免信息模糊审核不通过
			</view>
			<view class="flex justify-between align-center IDcard margin-top-sm">
				<view class="flex justify-center align-center flex-direction">
					<view v-if='idCardPicBack' style="position: relative;"
						class="flex justify-center align-center i-left">
						<image style="width: 100%;height: 100%;" :src="idCardPicBack" mode=""></image>
						<view class="cu-tag bg-red" @tap.stop="DelBack" style="right:0;top:0;position: absolute;">
							<text class="cuIcon-close"></text>
						</view>
					</view>
					<view v-else class="flex justify-center align-center i-left" @click="uploadBack">
						<image :src="baseUrl +'/static/positive.png'" mode=""></image>
					</view>
					<view class="text-sm text-999 margin-top-sm">
						身份证人像面
					</view>
				</view>
				<view class="flex justify-center align-center flex-direction">
					<view v-if='idCardPicFront' style="position: relative;"
						class="flex justify-center align-center i-left">
						<image style="width: 100%;height: 100%;" :src="idCardPicFront" mode=""></image>
						<view class="cu-tag bg-red" @tap.stop="DelFont" style="right:0;top:0;position: absolute;">
							<text class="cuIcon-close"></text>
						</view>
					</view>


					<view v-else class="flex justify-center align-center i-right" @click="uploadFont">
						<image :src="baseUrl +'/static/negative.png'" mode=""></image>
					</view>
					<view class="text-sm text-999 margin-top-sm">
						身份证国徽面
					</view>
				</view>
			</view>
		</view>



		<button style="margin-top: 211rpx;" class="text-15 text-white bg-color padding text-center btn round"
			@click="submit">确定</button>
		<view class="text-sm text-333 margin-bottom text-center">
			上传身份信息后，平台将24小时内审核
		</view>


	</view>
</template>

<script>
	import {
		appConfig
	} from '@/common/js/config.js'
	import {
		checkIDCard
	} from '@/common/js/idCard.js'
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				name: '',
				idCard: '',
				idCardPicBack: '',
				idCardPicFront: ''

			};
		},



		methods: {


			//上传身份证反面
			uploadBack() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							console.log(req)
							this.idCardPicBack = req.data
							console.log(this.idCardPicBack)

						})
					}
				});
			},
			//删除身份证反面
			DelBack() {
				this.idCardPicBack = ''
			},
			//上传身份证正面
			uploadFont() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							console.log(req)
							this.idCardPicFront = req.data

						})
					}
				});
			},
			//删除身份证正面
			DelFont() {
				this.idCardPicFront = ''
			},
			async submit() {
				const {
					name,
					idCard,
					idCardPicBack,
					idCardPicFront
				} = this
				if (!name) {
					return this.$util.msg('姓名不能为空')
				}
				console.log(idCard)
				if(!checkIDCard(idCard)){
					return this.$util.msg('您输入的身份证号码不是有效格式')
					}
				
				
				// if (!idCard && idCard.length == 15 && !(
				// 		/^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/.test(idCard)) || !
				// 	idCard && idCard.length == 18 && !(
				// 		/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
				// 		.test(idCard))) {

				// 	return this.$util.msg('您输入的身份证号码不是有效格式')

				// }
				if (!idCardPicBack) {
					return this.$util.msg('身份证人像面为空')
				}
				if (!idCardPicFront) {
					return this.$util.msg('身份证国徽面不能为空')
				}
				const data = {
					name,
					idCard,
					idCardPicBack,
					idCardPicFront,
					userId: uni.getStorageSync('userId')
				}
				const [err, rs] = await this.$jsonPost(this.$api.addIdentityInfo, data)
				if (rs) {
					this.$util.msg(rs.message)
					setTimeout(() => {
						uni.navigateBack({

						})
					}, 1000)
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.IDcard {

		.i-right,
		.i-left {
			width: 334rpx;
			height: 216rpx;
			background-color: #F4F4F4;

			image {
				width: 156rpx;
				height: 156rpx;
			}
		}

	}

	.m-card {

		.i-right,
		.i-left {
			width: 334rpx;
			height: 216rpx;
			background-color: #F4F4F4;

			image {
				width: 68rpx;
				height: 68rpx;
			}
		}
	}

	.t-btn {
		padding: 18rpx 28rpx;
	}

	.btn {
		margin: 60rpx 20rpx 20rpx;
	}

	.other-img {
		image {
			width: 226rpx;
			height: 226rpx;
		}

		.solids {
			width: 226rpx;
			height: 226rpx;
			background: #F4F4F4;
		}

		.solids::after {
			border: 0;
		}
	}
</style>
